<template>
  <div class="login-container">
    <div class="login-card">
      <div class="avatar-wrapper">
        <img src="@/assets/images/arrage.png" alt="Logo"/>
      </div>
      <h2 class="system-title">排课管理系统</h2>
      <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          class="login-form"
          label-width="0"
      >
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              class="login-input"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              class="login-input"
          />
        </el-form-item>
        <el-form-item prop="role">
          <el-radio-group v-model="loginForm.role" class="role-group">
            <el-radio-button label="0">管理员</el-radio-button>
            <el-radio-button label="1">教师</el-radio-button>
            <el-radio-button label="2">学生</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="btn-group">
          <el-button
              type="primary"
              @click="login"
              class="login-btn"
              :loading="loading"
          >登录
          </el-button>
          <el-button @click="router.push('/register')" class="reset-btn">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();

const role = ref("0");
const loading = ref(false);
const roleOptions = [
  {value: "0", label: "管理员", icon: "el-icon-s-tools"},
  {value: "1", label: "教师", icon: "el-icon-school"},
  {value: "2", label: "学生", icon: "el-icon-reading"},
];
const loginForm = ref({
  username: "10011",
  password: "admin123",
  role:"0"
});

const loginFormRules = reactive({
  username: [{required: true, message: '请输入账号', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
  role: [{required: true, message: '请选择身份', trigger: 'blur'}],
});

const login = async () => {
  const valid = await validateForm();
  // console.log(valid, loginForm.value)
  if (!valid) {
    return
  }
  const {role} = loginForm.value
  let res = null;
  if (role === "2") {
    // 学生登录
    res = await proxy.$api.loginStudnet({
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    window.localStorage.setItem("student", JSON.stringify(res.student));
  } else if (role === "1") {
    // 教师
    res = await proxy.$api.loginTeacher({
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    window.localStorage.setItem('teacher', JSON.stringify(res.teacher));
  } else if (role === "0") {
    // 管理员
    res = await proxy.$api.loginAdmin({
      username: loginForm.value.username,
      password: loginForm.value.password,
      type: role
    });
    window.localStorage.setItem('admin', JSON.stringify(res.admin));
  };

  console.log(res,role)
  // 动态路由
  store.commit("setMenu", res?.menu);
  store.commit('addMenu', router);

  store.commit('setToken', res.token);
  router.push({
    name: "home",
  })
};
const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.loginFormRef.validate((valid) => {
      resolve(valid);
    });
  });
};
const resetLoginForm = () => {
  proxy.$refs.loginFormRef.resetFields();
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    top: 10%;
    left: 15%;
  }

  &::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    bottom: 5%;
    right: 10%;
  }
}

.login-card {
  position: relative;
  width: 380px;
  padding: 80px 28px 28px;
  background: #ffffffee;
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow: hidden;
}

.avatar-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border: 4px solid #fff;
  //border-radius: 50%;
  overflow: hidden;
  background: #fff;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.system-title {
  margin-top: 50px;
  font-size: 20px;
  color: #555;
  font-weight: 500;
}

.login-form {
  margin-top: 20px;
}

.login-input {
  width: 100%;
  border-radius: 8px;
  transition: border-color .3s;

  &:focus-within {
    .el-input__inner {
      border-color: #42caff !important;
    }
  }
}

.role-cards {
  display: flex;
  justify-content: space-between;
  margin: 24px 0;

  .role-card {
    flex: 1;
    margin: 0 6px;
    padding: 8px 0;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s;
    text-align: center;

    i {
      font-size: 18px;
      margin-bottom: 4px;
      display: block;
      color: #888;
    }

    span {
      color: #666;
      font-size: 14px;
    }

    &.active {
      border-color: #42caff;
      background: #e6f7ff;

      i, span {
        color: #1890ff;
      }
    }

    input {
      display: none;
    }

    &:hover {
      border-color: #42caff;
    }
  }
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;

  .login-btn,
  .reset-btn {
    width: 48%;
    border-radius: 8px;
  }

  .login-btn {
    background: #42caff;
    border-color: #42caff;
  }

  .login-btn:hover {
    background: darken(#42caff, 5%);
  }

  .reset-btn {
    color: #42caff;
    border-color: #42caff;
  }

  .reset-btn:hover {
    background: fade(#42caff, 10%);
  }
}
</style>
